/*
  学习目标：Link组件
  作用: 跳转路由
  种类: Link  NavLink
  区别: NavLink匹配时会自带高亮类名
  💥匹配规则:
    1. 模糊匹配: 浏览器url路径  包含 to或者path的值
    2. 精准匹配:  浏览器url路径  完全相等 to或者path的值
*/
import React from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
import './index.css';

export default class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <h1>app组件</h1>
          <NavLink
            // 自定义高亮类名
            // activeClassName="xxx"
            to="/home"
            // 💥默认是开启模糊匹配, exact开启精准匹配
            exact
            // exact={true}
          >
            调到home
          </NavLink>
          <br />
          <NavLink to="/my">调到我的音乐</NavLink>
          <br />
          <NavLink to="/friend">调到朋友</NavLink>
          <div className="box">
            <Route path="/home" component={Home}></Route>
          </div>
          <Route path="/my" component={MyMusic}></Route>
          <Route path="/friend" component={Friend}></Route>
        </div>
      </Router>
    );
  }
}

function Home() {
  return <h1>我是首页组件</h1>;
}

function MyMusic() {
  return <h1>我是我的音乐件</h1>;
}

function Friend() {
  return <h1>我是朋友组件</h1>;
}
